Увеличение картинки с помощью CSS

Пример №1. Увеличение внутри блока.


Пример №2. Простое увеличение.


Все материалы подготовлены сайтом www.Сайто-строитель .рф

Сайто-строитель.рф – это личный блог автора блога А. Протасова.

Всё это и многон другое вы найдёте на сайте www.сайто-строитель.рф



Код страницы HTML, для вставки между тегами "<body></body>"

 <!-- Блок картинки пример №1 -->
<div class="block" id="block">
    <div>
    <a href="http://сайто-строитель.рф/"><img src="img/img1.jpg" /></a>
        </div>
    <div>
    <a href="http://сайто-строитель.рф/"><img src="img/img2.jpg" /></a>
        </div>
    <div>
    <a href="http://сайто-строитель.рф/"><img src="img/img3.jpg" /></a>
        </div>
</div>
<!-- Блок картинки пример №1 -->

<br>
<h2> Пример №2. Простое увеличение.</h2>



<!-- Блок картинки пример №2 -->
<div class="block2" id="block2">
<a href="http://сайто-строитель.рф/"><img src="img/img1.jpg" /></a>
<a href="http://сайто-строитель.рф/"><img src="img/img2.jpg" /></a>
<a href="http://сайто-строитель.рф/"><img src="img/img3.jpg" /></a>
</div>
<!-- Блок картинки пример №2 -->

Код CSS."

/* Стили для примеров работы увеличения изображения */
.block{
    width: 940px;
    height:320px;
    background-color: #FFFEF6;
    border: 1px solid #121AF0;
    margin: auto;    
    box-shadow: 5px 5px 10px #5F5F5F;    
    -o-box-shadow: 5px 5px 10px #5F5F5F;    
    -ms-box-shadow: 5px 5px 10px #5F5F5F;    
    -moz-box-shadow: 5px 5px 10px #5F5F5F;    
    -khtml-box-shadow: 5px 5px 10px #5F5F5F;    
    -webkit-box-shadow: 5px 5px 10px #5F5F5F;

}


/* Здесь начинаются правила для примера №1 */
#block div{
    width: 300px;
    height:300px;
    float: left;
    background-color: #E4E4E4;
    border: 1px solid #121AF0;
    margin: 8px 0px 8px 8px;
    
    overflow:hidden;
    /* overflow управляет отображением содержания блочного элемента, если оно целиком не помещается и выходит за область заданных размеров */
    /* hidden Отображается только область внутри элемента, остальное будет скрыто. */
}

#block img{
    width: 300px;
    height:300px;
    /* Скорость анимации. В данном случае 1  секунда 1S */
   
    -moz-transition: all 1s ease-out;         /* для Firefox */
    -o-transition: all 1s ease-out;          /* для браузера Опера */
    -webkit-transition: all 1s ease-out;     /* для Google Chrome и Safari */


 }
 
#block img:hover{
    /* Увеличение изображения. */
   
    -webkit-transform: scale(1.3);             /* для Google Chrome и Safari */
    -moz-transform: scale(1.3);             /* для Firefox */
    -o-transform: scale(1.3);                 /* для браузера Опера */
 }

/* Здесь начинаются правила для примера №2 */
.block2{
    width: 920px;
    height:320px;
    background-color: #FFFEF6;
    border: 1px solid #121AF0;
    margin: auto;
    box-shadow: 5px 5px 10px #5F5F5F;   
    -o-box-shadow: 5px 5px 10px #5F5F5F;   
    -ms-box-shadow: 5px 5px 10px #5F5F5F;   
    -moz-box-shadow: 5px 5px 10px #5F5F5F;   
    -khtml-box-shadow: 5px 5px 10px #5F5F5F;   
    -webkit-box-shadow: 5px 5px 10px #5F5F5F;
}

#block2 img{
    width: 300px;
    height:300px;
    margin: 2px auto;
    border: 1px solid #3AE2CE;

    overflow:hidden;
    /* Скорость анимации. В данном случае 1  секунда 1S */
   
    -moz-transition: all 1s ease-out;         /* для Firefox */
    -o-transition: all 1s ease-out;          /* для браузера Опера */
    -webkit-transition: all 1s ease-out;     /* для Google Chrome и Safari */


 }
 
#block2 img:hover{
    border: 1px solid #FF00AE;
    /* Увеличение изображения. */   
    -webkit-transform: scale(1.5);             /* для Google Chrome и Safari */
    -moz-transform: scale(1.5);             /* для Firefox */
    -o-transform: scale(1.5);                 /* для браузера Опера */
 }
 
/*  Конец стилей увеличения изображения */
Cайто-строитель.рфУвеличение картинки с помощью CSS Все подробности читайте здесь.

© 2013.Сайто-Строитель.рф